<template>
  <div
    class="promotionalVideo-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="body-container">
      <div class="video-container">
        <video
          src="http://221.226.70.138:9000/yx-cloud-vue/20240919181506-宣传视频.mp4"
          ref="video"
          id="video"
          loop
          controls
          muted="muted"
          autoplay
        ></video>
        <!-- 暂停 -->
        <div
          class="play-btn pause"
          @click="playVideo(0)"
          v-if="videoStatus == 1"
        ></div>
        <!-- 播放 -->
        <div class="play-btn" @click="playVideo(1)" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      videoStatus: 1,
    };
  },
  mounted() {
    this.$nextTick((_) => {
      setTimeout(() => {
        const videoElement = document.getElementById("video");
        videoElement.addEventListener("play", () => {
          this.videoStatus = 1;
        });
        videoElement.addEventListener("pause", () => {
          this.videoStatus = 0;
        });
      }, 1000);
    });
  },
  methods: {
    //视频播放
    playVideo(type = 1) {
      let videoDom = this.$refs["video"];
      this.videoStatus = type;
      if (type == 1) {
        videoDom.play();
      } else {
        videoDom.pause();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.promotionalVideo-container {
  width: 100%;
  height: 100%;
  padding: 60px 26px 20px 26px;
  box-sizing: border-box;
  .body-container {
    height: 100%;
    width: 100%;
    position: relative;
    .video-container {
      position: absolute;
      top: 126px;
      left: 50%;
      transform: translateX(-50%);
      width: 976px;
      height: 570px;
      background: #000000;
      border-radius: 4px;
      border: 1px solid #23adff;
      .play-btn {
        position: absolute;
        width: 48px;
        height: 48px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        background: url("~@/assets/img/home/playBtn.png");
        background-size: 100% 100%;
        &.pause {
          background: url("~@/assets/img/home/pauseBtn.png");
          background-size: 100% 100%;
          opacity: 0;
          transition: 0.3s;
        }
      }
      &:hover {
        .pause {
          opacity: 1;
        }
      }

      video {
        height: 100%;
        width: 100%;
        border-radius: 4px;
      }
    }
  }
}
</style>
